import React, { useEffect } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Form, Input, Button, Select, InputNumber, Switch, Upload } from 'antd';
import { connect } from 'umi';

const { TextArea } = Input;

function businessDetail(props: any) {
  console.log(props.detailsList);
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue(props.detailsList);
  }, []);

  const onFinish = (value: any) => {
    console.log(value);
    props.dispatch({
      type: 'office/CHANGE_LIST',
      payload: value,
    });
  };

  return (
    <div>
      11111111111
      <Form
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        style={{ maxWidth: 600 }}
        onFinish={onFinish}
      >
        <Form.Item name="id" label="楼盘名称">
          <Input />
        </Form.Item>
        <Form.Item name="title" label="楼盘名称">
          <Input />
        </Form.Item>
        <Form.Item name="address" label="楼盘地址">
          <Input />
        </Form.Item>
        <div
          style={{
            display: 'flex',
            width: 400,
            marginLeft: 33,
          }}
        >
          <Form.Item name="price" label="均价">
            <Input />
          </Form.Item>
          <Form.Item></Form.Item>
          <Select defaultValue="yuan">
            <Select.Option value="yuan">元/m²</Select.Option>
            <Select.Option value="qian">万/套</Select.Option>
          </Select>
        </div>

        <Form.Item name="opening_time" label="开盘时间">
          <Input />
        </Form.Item>
        <Form.Item name="developer_name" label="开发商">
          <Input />
        </Form.Item>
        <Form.Item name="update_time" label="交房时间">
          <Input />
        </Form.Item>
        <Form.Item label="InputNumber">
          <InputNumber />
        </Form.Item>
        <Form.Item label="TextArea">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item label="Switch" valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label="Upload" valuePropName="fileList">
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>Upload</div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            编辑
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

const mapStateToProps = (state: any) => {
  console.log(state);
  return {
    detailsList: state.office.detailsList,
  };
};
export default connect(mapStateToProps)(businessDetail);
